<template>
	<div class="dashboard-editor-container">
		<div v-for="(item,index) in dataList" :key="index">
			<el-row :gutter="20">
				<el-col :sm="24" :lg="24">
					<h2>{{item.name}}</h2>
				</el-col>
			</el-row>
			<!-- <panel-group @handleSetLineChartData="handleSetLineChartData" :group="item.group" /> -->
			<panel-group :group="item.group" />
			<el-row :gutter="32">
				<el-col :xs="24" :sm="24" :lg="12">
					<div class="chart-wrapper">
						<bar-chart :chart-data="item.barChartData" />
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="12">
					<div class="chart-wrapper">
						<line-chart :chart-data="item.lineChartData" />
					</div>
				</el-col>
			</el-row>
			<el-divider />
		</div>
	</div>
</template>

<script>
	import PanelGroup from './dashboard/PanelGroup'
	import LineChart from './dashboard/LineChart'
	import RaddarChart from './dashboard/RaddarChart'
	import PieChart from './dashboard/PieChart'
	import BarChart from './dashboard/BarChart'

	// 引入JOSN结构
	import {
		devices
	} from '@/structure/home.js';

	import {
		getStatistics
	} from "@/api/device/device";

	export default {
		name: 'Index',
		components: {
			PanelGroup,
			LineChart,
			RaddarChart,
			PieChart,
			BarChart
		},
		data() {
			return {
				dataList: devices
			}
		},
		created() {
			this.getStatistics()
		},
		methods: {
			getStatistics() {
				getStatistics().then(res => {
					// console.log("res=" + JSON.stringify(res));

					for (let i = 0; i < this.dataList.length; i++) {
						//如果服务端只返回充电桩数据,这里定义了充电桩/UPS/逆变器的数据,报错,因此加此判断
						if (!res.data.list[i]) {
							break;
						}
						for (let j = 0; j < this.dataList[i].group.length; j++) {
							if (!res.data.list[i].counts[j]) {
								break;
							}
							this.dataList[i].group[j].value = res.data.list[i].counts[j]
						}

						this.dataList[i].barChartData.xAxisData = res.data.list[i].barChartData.xaxisData
						this.dataList[i].barChartData.seriesData = res.data.list[i].barChartData.seriesData

						this.dataList[i].lineChartData.xAxisData = res.data.list[i].lineChartData.xaxisData
						this.dataList[i].lineChartData.seriesData = res.data.list[i].lineChartData.seriesData
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dashboard-editor-container {
		padding: 32px;
		background-color: rgb(240, 242, 245);
		position: relative;

		.chart-wrapper {
			background: #fff;
			padding: 16px 16px 0;
			margin-bottom: 32px;
		}
	}

	@media (max-width:1024px) {
		.chart-wrapper {
			padding: 8px;
		}
	}
</style>